<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="微信昵称">
              <a-input placeholder="请输入微信昵称" v-model="queryParam.wxName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="真实姓名">
              <a-input placeholder="请输入真实姓名" v-model="queryParam.realName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="电话号">
              <a-input placeholder="请输入电话号" v-model="queryParam.phone"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!--<a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>-->
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <!--<div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>

    </div>-->

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :expandedRowKeys="expandedRowKeys"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        @expand="handleExpand">

        <span slot="action" slot-scope="text, record">
            <router-link tag="a" target="_blank"
                     :to="{path:'/vwj',query:{tgId:record.id}}">查看下级玩家</router-link>
            <a-divider type="vertical" />
            <router-link tag="a" target="_blank"
                         :to="{path:'/vorder',query:{userId:record.id}}">订单明细</router-link>
          <!-- <a @click="handleEdit(record)">编辑</a>

           <a-divider type="vertical" />
           <a-dropdown>
             <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
             <a-menu slot="overlay">
               <a-menu-item>
                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                   <a>删除</a>
                 </a-popconfirm>
               </a-menu-item>
             </a-menu>
           </a-dropdown>-->
         </span>

        <a-table
          slot="expandedRowRender"
          slot-scope="text"
          :columns="innerColumns"
          :dataSource="innerData"
          size="middle"
          bordered
          rowKey="id"
          :loading="loading"
        >
          <span slot="action" slot-scope="text, record">
            <router-link tag="a" target="_blank"
                       :to="{path:'/vwj',query:{tgId:record.id}}">查看下级玩家</router-link>
            <a-divider type="vertical" />
            <router-link tag="a" target="_blank"
                         :to="{path:'/vorder',query:{userId:record.id}}">订单明细</router-link>
            <a-divider type="vertical" />
            <a-popconfirm title="确定取消代理推广吗?" @confirm="() => handleCancelDltg(record)">
              <a>取消代理推广</a>
            </a-popconfirm>
          </span>
        </a-table>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <vdltg-modal ref="modalForm" @ok="modalFormOk"></vdltg-modal>
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import VdltgModal from './modules/VdltgModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction,deleteAction } from '@/api/manage'

  export default {
    name: "VdltgList",
    mixins:[JeecgListMixin],
    components: {
      VdltgModal
    },
    data () {
      return {
        record:'',
        expanded:'',

        //子表表头
        innerColumns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '微信昵称',
            align:"center",
            dataIndex: 'wxName'
          },

          {
            title: '电话号',
            align:"center",
            dataIndex: 'phone'
          },

          {
            title: '真实姓名',
            align:"center",
            dataIndex: 'realName'
          },
          {
            title: '身份',
            align:"center",
            dataIndex: 'identity_dictText'
          },
          {
            title: '用户状态',
            align:"center",
            dataIndex: 'delflag_dictText'
          },
          {
            title: '下级玩家（人）',
            align:"center",
            dataIndex: 'countu'
          },
          {
            title: '累计收入（元）',
            align:"center",
            dataIndex: 'accumulatedAmount'
          },
          {
            title: '待提现金额（元）',
            align:"center",
            dataIndex: 'balance'
          },
          {
            title: '提现中金额（元）',
            align:"center",
            dataIndex: 'appreciating'
          },
          {
            title: '累计提现金额（元）',
            align:"center",
            dataIndex: 'ljtx'
          },
          {
            title: '成为推广员时间',
            align:"center",
            dataIndex: 'exaTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          },
      ],
          innerData: [],
          expandedRowKeys: [],
          id: ' ',



        description: '代理列表管理页面',
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
           },
		   {
            title: '微信昵称',
            align:"center",
            dataIndex: 'wxName'
           },
		   /*{
            title: '头像',
            align:"center",
            dataIndex: 'wxAvatar'
           },
		   {
            title: 'openId',
            align:"center",
            dataIndex: 'openId'
           },*/
		   {
            title: '电话号',
            align:"center",
            dataIndex: 'phone'
           },
		   /*{
            title: '上级用户',
            align:"center",
            dataIndex: 'onUserId'
           },*/
		   /*{
            title: '身份证号',
            align:"center",
            dataIndex: 'idCard'
           },*/
		   {
            title: '真实姓名',
            align:"center",
            dataIndex: 'realName'
           },
		   /*{
            title: '支付宝名字',
            align:"center",
            dataIndex: 'zfbName'
           },
		   {
            title: '支付宝账号',
            align:"center",
            dataIndex: 'zfbNumber'
           },*/
		   {
            title: '身份',
            align:"center",
            dataIndex: 'identity_dictText'
           },
		   /*{
            title: '平台推广等级',
            align:"center",
            dataIndex: 'rank'
           },
		   {
            title: '0:审核中,1:审核通过，2:审核不通过,3:未申请(推广员申请)',
            align:"center",
            dataIndex: 'type'
           },*/
		   /*{
            title: '推广员申请时间',
            align:"center",
            dataIndex: 'applyTime'
           },*/
		   {
            title: '用户状态',
            align:"center",
            dataIndex: 'delflag_dictText'
           },
		   /*{
            title: 'remark',
            align:"center",
            dataIndex: 'remark'
           },
		   {
            title: 'remark1',
            align:"center",
            dataIndex: 'remark1'
           },
		   {
            title: 'remark2',
            align:"center",
            dataIndex: 'remark2'
           },
		   {
            title: 'remark3',
            align:"center",
            dataIndex: 'remark3'
           },
		   {
            title: 'remark4',
            align:"center",
            dataIndex: 'remark4'
           },
		   {
            title: 'remark5',
            align:"center",
            dataIndex: 'remark5'
           },
		   {
            title: 'remark6',
            align:"center",
            dataIndex: 'remark6'
           },
		   {
            title: 'remark7',
            align:"center",
            dataIndex: 'remark7'
           },
		   {
            title: 'remark8',
            align:"center",
            dataIndex: 'remark8'
           },
		   {
            title: 'remark9',
            align:"center",
            dataIndex: 'remark9'
           },
		   {
            title: '分享次数（12点清0）',
            align:"center",
            dataIndex: 'remark10'
           },*/
		   {
            title: '直属下级（人）',
            align:"center",
            dataIndex: 'countu'
           },
		   {
            title: '累计收入（元）',
            align:"center",
            dataIndex: 'accumulatedAmount'
           },
		   {
            title: '待提现金额（元）',
            align:"center",
            dataIndex: 'balance'
           },
		   {
            title: '提现中金额（元）',
            align:"center",
            dataIndex: 'appreciating'
           },
		   {
            title: '累计提现金额（元）',
            align:"center",
            dataIndex: 'ljtx'
           },
          {
            title: '成为代理时间',
            align:"center",
            dataIndex: 'exaTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
        ],
		url: {
          list: "/vdltg/vdltg/list",
          delete: "/vdltg/vdltg/delete",
          tgyDelete: "/vtg/vtg/delete",
          deleteBatch: "/vdltg/vdltg/deleteBatch",
          exportXlsUrl: "vdltg/vdltg/exportXls",
          importExcelUrl: "vdltg/vdltg/importExcel",
          listVtg: "/vtg/vtg/list",
       },
    }
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
    methods: {
      handleExpand(expanded, record) {
        this.expanded = expanded;
        this.record = record;
        this.expandedRowKeys = []
        this.innerData = []
        if (expanded === true) {
          this.loading = true
          this.expandedRowKeys.push(record.id)
          getAction(this.url.listVtg, { userId: record.id }).then((res) => {
            if (res.success) {
              this.loading = false
              this.innerData = res.result.records
            }
          })
        }
      },
      //取消推广员
      handleCancelDltg(record){
        this.loading = true
        deleteAction(this.url.tgyDelete, { userId: record.id }).then((res) => {
          if (res.success) {
            this.loading = false
            this.handleExpand(this.expanded,this.record);
            this.$message.success(res.message);
          }
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>